<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="上传pdf">
        <el-upload
          class="upload-demo"
          :action="evn_uri + '/upload'"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
          :on-success="successFile"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">上传图片</el-button>
        <el-button @click="closeSubmit">取消</el-button>
      </el-form-item>
    </el-form>
    <div class="pdf-border" style="border: 1px solid #000">
      <pdf
        v-for="i in numPages"
        :key="i"
        :page="i"
        :src="pdfFile"
        :scale="1.5"
        prevent
      ></pdf>
    </div>
  </div>
</template>

<script>
// import { getList } from "@/api/list";
import { clear } from "@/api/upload";
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      evn_uri: process.env.VUE_APP_BASE_API,
      form: {
        file: "",
      },
      pdfFile: "",
      numPages: 1,
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url: require('@/assets/pdf.png'),
        // },
        // {
        //   name: "food2.jpeg",
        //   url: require('@/assets/pdf.png'),
        // },
      ],
      pdfImg: require("@/assets/pdf.png"),
    };
  },
  mounted() {},
  methods: {
    //取消上传的文件
    async closeSubmit() {
      let res = await clear({ filepath: this.fileList[0].file });
      let { code, data } = res;
      if (code == 20000 && typeof data === "boolean") {
        this.fileList = [];
        this.pdfFile = "";
        this.$message.success("取消成功");
      } else {
        this.$message.error(data.msg);
      }
    },
    //上传成功调用的函数
    successFile(res) {
      // console.log(res, "上传成功返回的数据");
      let { code, msg, data } = res;
      if (code == 20000) {
        let file = {
          name: data.name,
          url: this.pdfImg,
          file: data.url,
        };
        console.log(file);
        this.fileList.push(file);
      }
    },
    //上传文件前触发的函数
    beforeUpload(file) {
      // console.log(file, "上传的文件");
    },
    //移除fileList文件列表里的文件时触发的函数
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //点击fileList文件列表里的文件时触发的函数
    handlePreview({ file }) {
      // this.pdfFile = file;
      var loadingTask = pdf.createLoadingTask({
        url: file,
        cMapUrl: "./pdf/cmaps/",
        cMapPacked: true,
      });
      // cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",
      // console.log(loadingTask,'task');
      this.pdfFile = loadingTask;
      loadingTask.promise
        .then((pdf) => {
          // console.log(pdf,'pdf-----');
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.log(err);
          console.log("预览失败");
        });
    },
    //提交
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.annotationLayer .popupWrapper {
  display: none;
}
</style>
